<template>
  <div class="page-container md-html" v-html="content"> </div>
</template>

<script lang="ts">
  import { defineComponent, ref, onMounted, onUpdated } from 'vue';

  declare const hljs: any;

  export default defineComponent({
    name: 'Home',
    components: {},
    setup() {
      const content = ref('');
      function highlight() {
        document.querySelectorAll('pre code').forEach((el: HTMLElement) => {
          hljs.highlightElement(el);
        });
      }

      import('../../../README.md').then((doc) => {
        content.value = doc.html;
      });

      onMounted(highlight);
      onUpdated(highlight);
      return {
        content,
      };
    },
  });
</script>
<style lang="less" scoped></style>
